<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>034-浮动</title>
		<style>
			div {
				width: 600px;
				height: 400px;
				background-color: skyblue;
			}

			img {
				width: 200px;
				margin-right: 10px;
				/* 左浮动，文字环绕图片 */
				float: left;
			}

			.test::first-letter {
				font-size: 80px;
				float: left;
			}
		</style>
	</head>
	<body>
		<!-- 文字环绕图片 -->
		<div>
			<img src="https://www.runoob.com/try/demo_source/logo.png" alt="" />
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa porro quaerat, rerum itaque pariatur nobis quidem
			doloremque sed, quo quia officia animi quos veritatis. Delectus eveniet ab provident consectetur, minus incidunt
			neque explicabo consequatur ex repellendus magnam, aperiam quae non dolor iste reiciendis doloribus officiis
			pariatur amet deserunt! Praesentium ipsa quam quibusdam vero tempore minus natus rerum, tenetur fugit, placeat
			quos. Veniam nulla minus aperiam itaque est a deserunt tempora maxime voluptatem aliquam sint repellat, laborum
			quas nesciunt deleniti inventore sit, eius in, ipsam laudantium repellendus aliquid placeat? Est minima quia fugit
			recusandae aliquam sint eligendi obcaecati eius, perspiciatis dolore.
		</div>

		<hr />

		<!-- 文字环绕文字 -->
		<div class="test">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, blanditiis aut, commodi quis sit, modi aperiam
			laborum doloribus nostrum officiis tenetur mollitia! Beatae voluptatum totam quidem nihil nulla temporibus
			incidunt culpa harum qui recusandae? Ipsa aut officiis illo? Molestias alias tenetur eos omnis labore assumenda,
			ea doloremque temporibus, recusandae deleniti accusamus unde saepe inventore laborum aliquam, aperiam modi quis
			autem suscipit nihil laudantium aut vero quos qui? Nam sint, quasi iste aut ipsa deserunt blanditiis autem aliquid
			dolorem! Ipsam nisi impedit accusantium cum voluptatibus ullam maiores, voluptate aliquam perferendis ut tenetur
			eius, repudiandae error fuga id labore asperiores iure corporis.
		</div>
	</body>
</html>
